iT邦幫忙

2026 iThome 鐵人賽
DAY 27
0
自我挑戰組

Laravel 讀碼源系列 第 27 篇

美髮預約系統_users的程式碼-顯示出資料內容的畫面

18th鐵人賽
85 瀏覽

  • 分享至 

  • xImage
    •  

https://laihao.vaserver.com/hairdressingusers

要來講解美髮預約系統_users的程式碼

就是MVC架構

各畫面的程式碼解說

顯示出資料內容的程式碼
/home/laihao/public_html/resources/views/hairdressing/users/index.blade.php
程式碼

<!DOCTYPE html>
<html lang="zh-Hant-TW">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>使用者管理</title>
    <style>
        body { font-family: 'Microsoft JhengHei', sans-serif; background: #f9f3ff; margin: 0; padding: 0; }
        h1 { text-align: center; color: #6a0dad; margin-top: 30px; margin-bottom: 25px; }
        .btn { display: inline-block; background: #6a0dad; color: white; text-align: center;
               padding: 8px 20px; border-radius: 25px; text-decoration: none; border: none;
               cursor: pointer; font-size: 14px; }
        .btn:hover { background: #530a9e; }
        .btn-edit { background: #f0ad4e; }
        .btn-edit:hover { background: #d99332; }
        .btn-delete { background: #d9534f; }
        .btn-delete:hover { background: #b52b27; }
        .top-bar { width: 90%; margin: 0 auto 20px; display: flex; justify-content: flex-end; align-items: center; }
        .success { text-align: center; color: green; font-weight: bold; }
        table { width: 90%; margin: 0 auto; border-collapse: collapse; background: white;
                border-radius: 10px; overflow: hidden; box-shadow: 0 4px 15px rgba(0,0,0,0.1); }
        th { background: #6a0dad; color: white; padding: 12px; white-space: nowrap; }
        td { padding: 12px; border-bottom: 1px solid #eee; text-align: center; }
        tr:hover { background: #f3e8ff; }
        .role-admin { color: #6a0dad; font-weight: bold; }
        .role-receptionist { color: #4a90d9; font-weight: bold; }
        .role-stylist { color: #f0ad4e; font-weight: bold; }
        .status-active { color: #5cb85c; font-weight: bold; }
        .status-inactive { color: #999; }
        .actions { white-space: nowrap; }
        .actions form { display: inline-block; margin: 0; }
        .actions .btn { margin: 2px; }
    </style>
</head>
<body>
    <h1>🔑 使用者管理</h1>

    <div class="top-bar">
        <a href="{{ route('hairdressingusers.create') }}" class="btn">＋ 新增使用者</a>
    </div>

    @if(session('success'))
        <p class="success">{{ session('success') }}</p>
    @endif

    <table>
        <thead>
            <tr>
                <th>姓名</th>
                <th>Email</th>
                <th>角色</th>
                <th>狀態</th>
                <th>最後登入</th>
                <th>操作</th>
            </tr>
        </thead>
        <tbody>
            @foreach($hairdressingusers as $hairdressinguser)
            <tr>
                <td>{{ $hairdressinguser->name }}</td>
                <td>{{ $hairdressinguser->email }}</td>
                <td>
                    @if($hairdressinguser->role === 'admin')
                        <span class="role-admin">管理員</span>
                    @elseif($hairdressinguser->role === 'receptionist')
                        <span class="role-receptionist">櫃台</span>
                    @else
                        <span class="role-stylist">設計師</span>
                    @endif
                </td>
                <td>
                    @if($hairdressinguser->status === 'active')
                        <span class="status-active">啟用</span>
                    @else
                        <span class="status-inactive">停用</span>
                    @endif
                </td>
                <td>{{ $hairdressinguser->last_login_at ?? '-' }}</td>
                <td class="actions">
                    <a href="{{ route('hairdressingusers.edit', $hairdressinguser->id) }}" class="btn btn-edit">編輯</a>
                    <form action="{{ route('hairdressingusers.destroy', $hairdressinguser->id) }}" method="POST"
                          onsubmit="return confirm('確定要刪除這位使用者嗎？');">
                        @csrf
                        @method('DELETE')
                        <button type="submit" class="btn btn-delete">刪除</button>
                    </form>
                </td>
            </tr>
            @endforeach
        </tbody>
    </table>
</body>
</html>

這是一個 Laravel Blade 的「使用者管理」列表頁面。它從控制器接收 $hairdressingusers 集合，用表格列出所有使用者，並提供新增、編輯、刪除功能，以及操作後的快閃成功訊息。

文件與頁面設定

<!DOCTYPE html>
<html lang="zh-Hant-TW">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>使用者管理</title>
  • <!DOCTYPE html>：宣告 HTML5。
  • lang="zh-Hant-TW"：頁面語言為台灣繁體中文。
  • charset="UTF-8"：支援中文與 emoji（例如 🔑）。
  • viewport：讓頁面在手機上能依螢幕寬度縮放，提升 RWD 效果。
  • <title>：瀏覽器分頁顯示「使用者管理」。

CSS 樣式重點

body {
    font-family: 'Microsoft JhengHei', sans-serif;
    background: #f9f3ff;
    margin: 0;
    padding: 0;
}
  • 使用微軟正黑體，背景為淡紫色。
  • 移除預設 margin/padding，讓版面更好控制。
.top-bar {
    width: 90%;
    margin: 0 auto 20px;
    display: flex;
    justify-content: flex-end;
    align-items: center;
}
  • 頂部工具列寬度 90%，水平置中。
  • justify-content: flex-end 把「＋ 新增使用者」按鈕推到右側。
.success {
    text-align: center;
    color: green;
    font-weight: bold;
}
  • 用來顯示操作成功訊息（例如新增、刪除成功），置中綠色粗體。
table {
    width: 90%;
    margin: 0 auto;
    border-collapse: collapse;
    background: white;
    border-radius: 10px;
    overflow: hidden;
    box-shadow: 0 4px 15px rgba(0,0,0,0.1);
}
  • 表格也是 90% 寬度、水平置中。
  • 白色背景、圓角、陰影，形成卡片式表格。
  • overflow: hidden 讓 border-radius 在表格上正常顯示。
th {
    background: #6a0dad;
    color: white;
    padding: 12px;
    white-space: nowrap;
}
  • 表頭背景紫色、白色文字。
  • white-space: nowrap 避免表頭文字換行，保持整齊。
tr:hover {
    background: #f3e8ff;
}
  • 滑鼠移到某一列時，背景變淡紫色，提升互動感。

角色與狀態的顏色樣式

.role-admin { color: #6a0dad; font-weight: bold; }
.role-receptionist { color: #4a90d9; font-weight: bold; }
.role-stylist { color: #f0ad4e; font-weight: bold; }

.status-active { color: #5cb85c; font-weight: bold; }
.status-inactive { color: #999; }
  • 不同角色用不同顏色顯示：
    • 管理員：紫色
    • 櫃台：藍色
    • 設計師：橘色
  • 狀態：
    • 啟用：綠色
    • 停用：灰色

按鈕樣式

.btn {
    display: inline-block;
    background: #6a0dad;
    color: white;
    text-align: center;
    padding: 8px 20px;
    border-radius: 25px;
    text-decoration: none;
    border: none;
    cursor: pointer;
    font-size: 14px;
}
.btn:hover { background: #530a9e; }

.btn-edit { background: #f0ad4e; }
.btn-edit:hover { background: #d99332; }

.btn-delete { background: #d9534f; }
.btn-delete:hover { background: #b52b27; }
  • .btn：預設紫色按鈕。
  • .btn-edit：編輯按鈕為橘色。
  • .btn-delete：刪除按鈕為紅色。
  • hover 時顏色變深，提供視覺回饋。

操作區塊樣式

.actions { white-space: nowrap; }
.actions form { display: inline-block; margin: 0; }
.actions .btn { margin: 2px; }
  • white-space: nowrap：避免「編輯」「刪除」按鈕換行。
  • 刪除按鈕包在 <form> 中，設為 inline-block，讓它跟編輯按鈕排在同一列。
  • 按鈕之間加一點間距。

頁面標題與新增按鈕

<h1>🔑 使用者管理</h1>

<div class="top-bar">
    <a href="{{ route('hairdressingusers.create') }}" class="btn">＋ 新增使用者</a>
</div>
  • <h1>：頁面主標題。
  • .top-bar 中的連結：
    • route('hairdressingusers.create')：利用命名路由產生「新增使用者」頁面網址。
    • 點擊後跳到新增表單頁。

快閃成功訊息

@if(session('success'))
    <p class="success">{{ session('success') }}</p>
@endif
  • session('success')：從控制器帶過來的快閃訊息，例如： 
    return redirect()->route('hairdressingusers.index')
                 ->with('success', '使用者新增成功！');
  • 若有這筆 session，就顯示綠色成功訊息。
  • 刷新頁面後，這筆快閃訊息通常會自動消失（flash data）。

表格結構

<table>
    <thead>
        <tr>
            <th>姓名</th>
            <th>Email</th>
            <th>角色</th>
            <th>狀態</th>
            <th>最後登入</th>
            <th>操作</th>
        </tr>
    </thead>
    <tbody>
        ...
    </tbody>
</table>
  • 表頭定義六欄：姓名、Email、角色、狀態、最後登入、操作。
  • 實際資料在 <tbody> 中用 @foreach 跑迴圈產生。

使用者列表迴圈

@foreach($hairdressingusers as $hairdressinguser)
<tr>
    <td>{{ $hairdressinguser->name }}</td>
    <td>{{ $hairdressinguser->email }}</td>
    ...
</tr>
@endforeach
  • $hairdressingusers 是從控制器傳來的集合（通常是 HairdressingUser 模型的查詢結果）。
  • 每次迴圈 $hairdressinguser 代表一筆使用者資料。

姓名與 Email

<td>{{ $hairdressinguser->name }}</td>
<td>{{ $hairdressinguser->email }}</td>
  • 直接輸出姓名與 Email。

角色顯示（带顏色）

<td>
    @if($hairdressinguser->role === 'admin')
        <span class="role-admin">管理員</span>
    @elseif($hairdressinguser->role === 'receptionist')
        <span class="role-receptionist">櫃台</span>
    @else
        <span class="role-stylist">設計師</span>
    @endif
</td>
  • 根據 role 欄位（admin、receptionist、stylist）顯示不同中文與顏色。
  • 中文顯示給使用者看，程式內部仍使用英文代碼方便驗證與判斷。

狀態顯示（带顏色）

<td>
    @if($hairdressinguser->status === 'active')
        <span class="status-active">啟用</span>
    @else
        <span class="status-inactive">停用</span>
    @endif
</td>
  • active → 綠色「啟用」。
  • 其他（通常是 inactive）→ 灰色「停用」。

最後登入時間

<td>{{ $hairdressinguser->last_login_at ?? '-' }}</td>
  • 若 last_login_at 有值，就顯示時間字串。
  • 若為 null，顯示 - 表示尚未登入。
  • 這裡使用 Blade 的 ?? 運算子（null 合併運算子）。

操作列：編輯與刪除

<td class="actions">
    <a href="{{ route('hairdressingusers.edit', $hairdressinguser->id) }}"
       class="btn btn-edit">編輯</a>

    <form action="{{ route('hairdressingusers.destroy', $hairdressinguser->id) }}"
          method="POST"
          onsubmit="return confirm('確定要刪除這位使用者嗎？');">
        @csrf
        @method('DELETE')
        <button type="submit" class="btn btn-delete">刪除</button>
    </form>
</td>

編輯按鈕

  • route('hairdressingusers.edit', $hairdressinguser->id)：
    • 產生編輯頁面的網址，例如 /hairdressingusers/5/edit。
    • 對應控制器的 edit($id) 方法。

刪除表單

  • action="{{ route('hairdressingusers.destroy', $hairdressinguser->id) }}"：
    • 送出到刪除路由，例如 /hairdressingusers/5。
    • 對應控制器的 destroy($id) 方法。
  • method="POST"：HTML 表單只能用 GET/POST，這裡用 POST 再搭配 Laravel 的假方法。
  • @csrf：加入 CSRF Token，防止跨站請求。
  • @method('DELETE')：讓 Laravel 把這個請求視為 DELETE。
  • onsubmit="return confirm('確定要刪除這位使用者嗎？');"：
    • 送出前跳出確認視窗。
    • 使用者按「取消」就不會送出刪除請求。

整體流程

  1. 使用者進入此頁，控制器查詢所有 $hairdressingusers 並傳入視圖。
  2. 視圖用表格列出所有使用者，包含角色、狀態、最後登入時間。
  3. 點擊「＋ 新增使用者」：跳到新增表單頁。
  4. 點擊「編輯」：跳到編輯表單頁。
  5. 點擊「刪除」：
    • 跳出確認視窗。
    • 確認後送出 DELETE 請求。
    • 控制器刪除資料後，導回此頁並帶入 session('success')。
  6. 視圖偵測到 session('success') 就顯示綠色成功訊息。
    --
    明天來公布~新增/修改的前端畫面程式碼~跟routes

上一篇
美髮預約系統_users的程式碼-M跟C
下一篇
美髮預約系統_users的程式碼-新增/編輯資料內容的畫面
系列文
Laravel 讀碼源 共 30 篇
  1. 26
    美髮預約系統_users的程式碼-M跟C
  2. 27
    美髮預約系統_users的程式碼-顯示出資料內容的畫面
  3. 28
    美髮預約系統_users的程式碼-新增/編輯資料內容的畫面
  4. 29
    美髮預約系統_customers 起手式
  5. 30
    美髮預約系統_customers的MVC內容
完整目錄
圖片
  熱門推薦
圖片
{{ item.channelVendor }} | {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言
iThome鐵人賽
參賽組數
929 組
團體組數
32 組
累計文章數
11005 篇
完賽人數
133 人
iT+看影片追技術 看影片追技術 看更多
熱門tag
15th鐵人賽 16th鐵人賽 13th鐵人賽 14th鐵人賽 17th鐵人賽 12th鐵人賽 11th鐵人賽 鐵人賽 18th鐵人賽 2019鐵人賽 javascript 2018鐵人賽 python 2017鐵人賽 windows php c# linux windows server css
熱門問題
熱門回答
熱門文章
IT邦幫忙